import { Table } from 'apusic-ui';
import { Link } from 'react-router-dom';
import CommonLayout from '@/components/CommonLayout';

const pageTemplateList = [
  {
    name: "顶部导航",
    description: "顶部导航",
    key: "top-navigation", //对应路由
  },
  {
    name: "栅格（标题栏）",
    description: "栅格（标题栏）",
    key: "header-grid", //对应路由
  },
  {
    name: "搜索组件",
    description: "搜索组件",
    key: "advanced-search", //对应路由
  },
  {
    name: "表格示例",
    description:"表格示例",
    key: "table-demo", //对应路由
  },
  {
    name: "对话框示例",
    description:"对话框示例",
    key: "modal-demo", //对应路由
  }
];

const IndexPage = () => {
  return (
    <CommonLayout>
      <Table
        style={{padding:20}}
        pagination={false}
        columns={[
          {
            title: "名称",
            key: "name",
            dataIndex: "name"
          },
          {
            title: "描述",
            key: "description",
            dataIndex: "description"
          },
          {
            title: "快捷跳转",
            key: "key",
            dataIndex: "key",
            render: (key) => {
              return (
                <Link to={`/${key}`}>跳转</Link>
              );
            }
          }
        ]}
        dataSource={pageTemplateList}
      />
    </CommonLayout>
  );
}

export default IndexPage;